<template>
  <!-- <ImageUpload /> -->
  <div>
    <h1>{{ t('helloworld') }}</h1>
    <div>{{ t('sayhi') }}</div>
    <el-button @click="locale = 'zh'">中文</el-button>
    <el-button @click="locale = 'en'">英文</el-button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      // 记录当前语言设定的标记
      locale: 'zh',
      messages: {
        // 多个语言字典
        zh: {
          // 指定一个标识和对应的翻译
          helloworld: '你好世界!',
          sayhi: '亲你来啦?'
        },
        en: {
          helloworld: 'Hello World!',
          sayhi: 'come on baby'
        }
      }
    }
  },
  created() {
    console.log(this.$t)
  },
  methods: {
    // 翻译函数 接收一个语言标记, 根据当前的设定, 返回对应的翻译语句
    t(val) {
      // 1. 找到语言包
      const message = this.messages[this.locale]
      return message[val]
    }
  }
}
</script>
